<script setup lang="ts">
import { computed, ref } from "vue";
import portService from "@/apis";
import { $singleMsg } from "xt-public/plugins/utils/element.js";
import type Typings from "@/typings";

// 确定按钮 loading
const confirmLoading = ref<boolean>(false);
const visible = ref<boolean>(false);
const resolve = ref();
const reject = ref();

const dialogType = ref<Typings.Project.handleType>("check");
// 是否为新增项目或添加系统
const isCreate = computed<boolean>(() =>
  ["create", "createSystem"].includes(dialogType.value)
);
// 是否为查看模式
const isCheck = computed<boolean>(() => dialogType.value === "check");

const form = ref();
// 表单数据
const formData = ref<Partial<Typings.Project.props>>({
  id: "",
  parentId: "",
  parentName: "",
  name: "",
  code: "",
});
// 表单渲染数据
const formJson = computed<Typings.XtPublic.DynamicForm.formJson[]>(() => {
  return [
    {
      el: "input",
      span: 24,
      prop: "parentName",
      label: "父级",
      placeholder: "请输入父级",
      disabled: true,
    },
    {
      el: "input",
      span: 24,
      prop: "name",
      label: "名称",
      placeholder: "请输入名称",
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    },
    {
      el: "input",
      span: 24,
      prop: "code",
      label: "代码",
      placeholder: "请输入代码",
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
      disabled: !isCreate.value,
    },
  ];
});

// 控制器
const controll = {
  // 打开弹窗
  open(row: Typings.Project.props, type: Typings.Project.handleType) {
    return new Promise((_resolve, _reject) => {
      visible.value = true;
      resolve.value = _resolve;
      reject.value = _reject;

      /**
       * createSsytem 添加系统
       */
      if (type === "createSystem") {
        formData.value = {
          ...formData.value,
          parentId: row.id,
          parentName: row.name,
        };
      } else {
        formData.value = {
          ...formData.value,
          ...row,
        };
      }

      dialogType.value = type;
    });
  },

  // 关闭弹窗
  close(shouldReject = true) {
    visible.value = false;
    formData.value = {
      id: "",
      parentId: "",
      parentName: "",
      name: "",
      code: "",
    };

    form.value.getInstance().clearValidate();
    form.value.getInstance().resetFields();

    if (shouldReject) {
      reject.value("cancel");
    }
  },

  // 确定
  async confirm() {
    try {
      confirmLoading.value = true;
      const params = {
        ...formData.value,
      };
      await portService[
        formData.value.id ? "projectUpdateApi" : "projectAddApi"
      ](params);
      $singleMsg({
        type: "success",
        message: formData.value.id ? "更新成功" : "添加成功",
      });
      controll.close(false);
      resolve.value(true);
    } finally {
      confirmLoading.value = false;
    }
  },
};

defineExpose({
  open: controll.open,
});
</script>

<template>
  <xt-dialog v-model="visible" title="项目信息" :before-close="controll.close">
    <xt-dynamic-form
      ref="form"
      :label-width="108"
      :disabled="isCheck"
      :data="formData"
      :formJson="formJson"
    />

    <template #footer>
      <div class="w-full center">
        <xt-button
          v-if="!isCheck"
          :loading="confirmLoading"
          @click="controll.confirm"
          >确 定</xt-button
        >
        <xt-button type="default" @click="controll.close(true)"
          >取 消</xt-button
        >
      </div>
    </template>
  </xt-dialog>
</template>
